<template>
  <div>
    <div style="text-align: right;">
      <el-button
        type="primary"
        @click="addFunc"
      >新增</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          label="序号"
          width="50"
        >
        <template slot-scope="scope">{{scope.$index + 1}}</template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="按钮名称"
        >
        <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="按钮key"
        >
        <template slot-scope="scope">{{scope.row.route}}</template>
        </el-table-column>
        <el-table-column
          prop="date"
          label="操作"
          width="160"
          align="center"
        >
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="editFunc(scope.row)">编辑</el-button>
          <el-button size="mini" @click="delFunc(scope.row)">删除</el-button>
        </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title="按钮维护"
      width="500px"
      :visible.sync="dialogVisible"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="按钮名称"
          prop="name"
        >
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item
          label="按钮key"
          prop="route"
        >
          <el-input v-model="formData.route"></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      formData: {
        name: '',
        route: ''
      },
      rules: {
        name: [
          { required: true, message: '按钮名称不能为空', trigger: 'blur' }
        ],
        route: [
          { required: true, message: '按钮key不能为空', trigger: 'blur' }
        ]
      },
      editId: '', // 编辑的id
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    /**
     * @name getTableData
     * @description 获取表格数据
     * @author cjs1992
     * @date 2019-12-02 17:20:02
     */
    async getTableData() {
      const res = await this.$store.dispatch("qxgl-menu/getPermissionButton", {
        id: this.id
      });
      this.tableData = res.data;
    },
    /**
     * @name addFunc
     * @description 新增
     * @author cjs1992
     * @date 2019-12-02 17:31:02
     */
    async addFunc() {
      this.editId = '';
      this.resetFormData();
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.resetForm();
      });
    },
    /**
     * @name editFunc
     * @description 编辑
     * @author cjs1992
     * @date 2019-12-03 09:04:55
     */
    editFunc (data) {
      const { id } = data;
      this.editId = id;
      this.resetFormData();
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.resetForm();
        this.formData = {
          name: data.name,
          route: data.route
        };
      });
    },
    /**
     * @name delFunc
     * @description 删除
     * @author cjs1992
     * @date 2019-12-03 09:05:07
     */
    delFunc (data) {
      this.$confirm("您确定要删除按钮吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          const res = await this.$store.dispatch('qxgl-menu/disable', {
            id: data.id
          });
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getTableData();
        })
        .catch(() => {});
    },
    /**
     * @name submitForm
     * @description
     * @author cjs1992
     * @date 2019-12-03 08:46:32
     */
    submitForm() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.sureFunc();
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    /**
     * @name sureFunc
     * @description 确定
     * @author cjs1992
     * @date 2019-12-03 08:51:06
     */
    async sureFunc () {
      let obj = {
        parentId: this.id
      };
      let url = 'addButton';
      if (this.editId) {
        obj = {
          ...obj,
          id: this.editId
        };
        url = 'edit'
      }
      const res = await this.$store.dispatch(`qxgl-menu/${url}`, {
        ...this.formData,
        appKey: this.$attrs.appKey,
        ...obj
      });
      this.dialogVisible = false;
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
      this.getTableData();
    },
    /**
     * @name resetForm
     * @description 重置表格
     * @author cjs1992
     * @date 2019-12-03 08:47:25
     */
    resetForm() {
      // 此处需要先清除数据 TODO
      this.resetFormData();
      this.$refs["ruleForm"].resetFields();
    },
    /**
     * @name resetFormData
     * @description 重置表格数据
     * @author cjs1992
     * @date 2019-12-03 08:47:44
     */
    async resetFormData() {
      this.formData = {
        name: '',
        route: ''
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  text-align: center;
  margin-top: 20px;
}
</style>
